<style lang="stylus" type="text/stylus">
  @import 'css/componentDetail.styl'
</style>
<template>
  <div class="componentDetail">
    <div class="component-title" :class="{history:hasHistory}">
      <span @click="backHistory()" class="back-history" v-if="hasHistory"><Icon type="ios-arrow-back"></Icon>&nbsp;&nbsp;&nbsp;</span>
      <p v-if="getGroupData">{{routerTitle[0]}}</p>
      <div class="router-title">
        <span v-for="(item,index) in routerTitle" v-if="index!== 0" :key="index">
          <Icon type="ios-arrow-right"></Icon>
          <span @click="routerGo(index)" class="rotuer">{{item}}</span>
        </span>
      </div>
    </div>
    <div class="component-con">
      <componentG v-for="item in getGroupData.items" v-if="itemTypeF(item)" :key="item.id"
                  :componentGData="item"></componentG>
    </div>
  </div>
</template>

<script>
  import componentG from './component-g.vue'

  export default {
    name      : 'componentDetail',
    props     : ['componentData'],
    components: {
      componentG
    },
    computed  : {
      getGroupData() {
        return this.$store.getters.getGroupData
      },
      hasHistory() {
        return this.$store.getters.getComponentHistory.length > 1
      },
      routerTitle() {
        if (this.getGroupData.title) {
          let title = this.getGroupData.title.split('/')
          return title;
        } else {
          return []
        }
      }
    },
    methods   : {
      backHistory() {
        this.$store.commit('deleteComponenthistory')
      },
      routerGo(index) {
//        if (index !== this.routerTitle.length - 1) {
//          this.$store.commit('setComponentHistory', Number(index + 1))
//        }
      },
      itemTypeF(item) {
        return (item.itemType == 'F' && item.status == 0) || item.itemType == 'G'
      }
    },
    created() {
    }
  }
</script>
